<template>
  <Drawer ref="drawer" :title="title" :width="width" v-model:visible="visible" destroyOnClose>
    <template #footer>
      <div ref="footer">
        <template v-if="stepsState === 0">
          <a-button key="back" @click="handleCancel">{{ common('closeText') }}</a-button>
          <a-button v-if="title !== titleState.DETAIL" key="submit" type="primary" style="margin-left: 12px" @click="handleSave">{{
            common('saveText')
          }}</a-button>
        </template>

        <template v-else-if="stepsState === 1">
          <a-button key="back" @click="handleCancel">{{ common('closeText') }}</a-button>
          <!-- <a-button key="submit" type="primary" style="margin-left: 12px" @click="toEdit">{{ common('editText') }}</a-button> -->
          <a-button key="submit" type="primary" style="margin-left: 12px" @click="handleSubmit">{{ common('submitText') }}</a-button>
        </template>
      </div>
    </template>
    <div style="height: 100%; display: flex; flex-direction: column">
      <div v-if="title !== titleState.DETAIL" style="padding: 10px 0px 10px 0px">
        <a-steps :current="stepsState">
          <a-step :title="t('step1')" />
          <a-step :title="t('step2')" />
          <a-step :title="t('step3')" />
        </a-steps>
      </div>
      <div style="flex: 1">
        <DocumentForm
          v-show="stepsState === 0 && title !== titleState.DETAIL"
          ref="registerForm"
          @ok="submitCallback"
          @deleted="handelDeleteAsset"
          :formDisabled="disableSubmit"
          :formBpm="false"
          :assetDataList="assetDataList"
        />
        <VoucherForm
          v-if="stepsState === 1 || [titleState.DETAIL].includes(title)"
          ref="voucherForm"
          :fData="formData"
          :formBpm="false"
          @ok="submitCallback"
        />
        <a-result v-if="stepsState === 2" status="success" :title="common('operateSuccessfully')" :sub-title="t('used')">
          <template #extra>
            <a-button type="primary" @click="handleCancel"> {{ common('closeText') }} </a-button>
            <a-button @click="toDetail"> {{ common('detailText') }} </a-button>
          </template>
        </a-result></div
      >
    </div>
  </Drawer>
</template>

<script lang="ts" setup>
  import { ref, nextTick } from 'vue';
  import DocumentForm from './DocumentForm.vue';
  import { Drawer } from 'ant-design-vue';
  import VoucherForm from './VoucherForm.vue';
  import { list } from '@/views/asset/asset-info/AssetInfo.api';
  import { watchEffect } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n('asset.assetReturnResignation');
  const { t: common } = useI18n('common');

  // import { Steps } from 'ant-design-vue';
  const titleState = {
    DETAIL: common('detailText'),
    ADD: common('addText'),
    EDIT: common('editText'),
    SUBMIT: common('submitText'),
  };
  const title = ref<string>(titleState.ADD);
  const width = ref<number>(1200);
  const visible = ref<boolean>(false);
  const disableSubmit = ref<boolean>(false);
  const registerForm = ref<InstanceType<typeof DocumentForm>>();
  const emit = defineEmits(['register', 'success']);
  const stepsState = ref(0);

  const voucherForm = ref<InstanceType<typeof VoucherForm>>();
  /**
   * 新增
   */
  function add() {
    title.value = titleState.ADD;
    visible.value = true;
    stepsState.value = 0;
    nextTick(() => {
      registerForm.value?.add();
    });
  }
  /**
   * 取消按钮回调事件
   */
  function handleCancel() {
    visible.value = false;
    assetDataList.value = [];
  }

  /**
   * 编辑
   * @param record
   */
  const formData = ref({});
  function edit(record, step = 0) {
    stepsState.value = step;
    title.value = step === 0 ? titleState.EDIT : titleState.SUBMIT;
    disableSubmit.value && (title.value = titleState.DETAIL);
    visible.value = true;
    getAssetList(record.assetList);
    formData.value = record;
    console.log(formData.value, 'formData.value');
    nextTick(() => {
      registerForm.value?.edit(record);
    });
  }

  //新增编辑页面保存
  function handleSave() {
    registerForm.value?.submitForm();
  }
  // 提交页面去编辑页面
  function toEdit() {
    stepsState.value = 0;
    title.value = titleState.EDIT;
    registerForm.value?.edit(formData.value);
    // voucherForm.value?.resetFields();
  }
  /**
   * 提交事件
   */
  function handleSubmit() {
    voucherForm.value?.submitForm();
  }
  //资产处理代码
  const assetDataList = ref([]);
  const getAssetList = (id) => {
    if (id) {
      list({ id, pageSize: -1 }).then((res) => {
        assetDataList.value = res.records;
      });
    } else {
      assetDataList.value = [];
    }
  };
  const handelDeleteAsset = (id) => {
    if (id) {
      getAssetList(id);
      emit('success');
    }
  };
  watchEffect(() => {
    visible.value || (assetDataList.value = []);
  });
  const toDetail = () => {
    title.value = titleState.DETAIL;
    disableSubmit.value = true;
    edit(formData.value);
  };
  /**
   * form保存回调事件
   */
  function submitCallback(data) {
    emit('success');
    if (stepsState.value === 0) {
      //第一步
      stepsState.value = 1;
      title.value = titleState.SUBMIT;
      formData.value = data;
    } else if (stepsState.value === 1) {
      //第二步
      stepsState.value = 2;
    } else {
      handleCancel();
    }
  }
  const footer = ref();
  const drawer = ref<InstanceType<typeof Drawer>>();
  defineExpose({
    add,
    edit,
    disableSubmit,
    close: handleCancel,
    registerForm,
    footer,
    drawer,
  });
</script>

<style>
  /**隐藏样式-modal确定按钮 */
  .jee-hidden {
    display: none !important;
  }
</style>
